<template>
    <div>
        <div class="question_cont_banner"></div>
        <div class="question_cont" ref="question_cont">
            <div class="question_cont_bor" ref="question_cont_bor">
                <div class="question_box_top">
                    <span>迅构云社区 > 技术应用 > 开发者论坛一周精粹（第四十二期）晒代码千元话费送不停 免费证书</span>
                </div>
                <div class="question_cont_box">
                    <div>
                        <div class="question_cont_box_title">
                            <div class="question_cont_box_title_left">
                                <div class="question_title">
                                    <span>标题</span>
                                    <span>标题名称不可包含“【 】”大括号</span>
                                </div>
                                <input type="text"   v-model="titleData">
                            </div>
                            <div class="question_cont_box_title_right">
                                <div class="question_title">
                                    <span>发布到板块</span>
                                </div>
                                <select name="" id="" v-model="classId">
                                    <option v-for="item in modelList" :value="item.Id">{{item.ThemeClassName}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="question_cont_box_txt">
                            <div class="question_cont_box_txt_title">
                                问题内容
                            </div>
                            <textarea type="text" id="" placeholder="" v-model="txtData"></textarea>
                        </div>
                        <div class="question_cont_box_img">
                            <div class="question_cont_box_txt_title uploadimg_btn">
                                <!--<span>选择图片</span>-->
                                <!--:headers="{'Access-Control-Allow-Origin' : '*'}"-->
                                <Upload :action="url"
                                        name="files"  :show-upload-list="false"   :format="['jpg','png']" multiple
                                        :before-upload="handleBeforeUpload"  :on-exceeded-size="handleMaxSize" :max-size="500"
                                        :on-success="handleSuccess1" :on-error="herror" :on-format-error="ferror" :on-progress="progress1">
                                    <i-button type="ghost" icon="image">选择图片</i-button>
                                </Upload>

                                <!--<input type="file"  @change="onFileChange" >-->
                                <span>每个问题最多上传5张图片，只能上传jpg/png文件，且不超过500kb</span>
                            </div>
                            <div class="question_cont_box_txt_imglist">
                                <!--<div class="question_cont_box_txt_imglist_item" >-->
                                <!--<img src="../../assets/img/askqes_list1.png" alt="">-->
                                <!--<div class="imgbg">-->
                                <!--<div class="img"></div>-->
                                <!--</div>-->
                                <!--</div>-->

                                <div class="question_cont_box_txt_imglist_item" v-for="item in imglist">
                                    <img :src="item" alt="">
                                    <div class="imgbg">
                                        <div class="img" @click="handleRemove(item)"></div>
                                    </div>

                                </div>




                            </div>

                        </div>
                        <div class="question_cont_box_button">
                            <div class="question_cont_box_button_txt" @click="takeSub">
                                发布问题
                            </div>

                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
</template>

<script>
import {HttpRs} from '../../stataic/staticApi.js'
import {PublicHttp} from '../../stataic/sign.js'
import axios from 'axios';
let LoadUrl = PublicHttp(false)+'/webapi/Upload';
    export default {
        data(){
            return {
                /*文件上传路径*/
                url:LoadUrl,
                /*图片上传列表*/
                imglist:[],
                /*标题*/
                titleData:"",
                /*问题内容*/
                txtData:"",
                /*发布模块*/
                modelList:'',
                /*选择模板内容*/
                classId:'',
//                date:''
            }
        },
        created(){
            var time = new Date();
             console.log(time.Format("yyyy-MM-dd HH:mm"))
            this.getModelData()


            /*     HttpRs('http://192.168.3.237:5000/webapi/Community/TopicItems','get','').then(function (response) {
                console.log(1111)
                console.log(response)
            })*/
                /*请求获得社区分类*/
           /*     this.fetchs.GetDatasdes({
                    url:'/webapi/Community/TopicItems',
                    type:'get',
                    param:{

                    },
                    success:(ret)=>{
                        console.log('请求获得社区分类')
                        console.log(ret)

                    },
                    error:(err)=>{

                    }
                })
                /!*请求获得热门主题*!/
                this.fetchs.GetDatasdes({
                    url:'/webapi/Community/HotTopic',
                    type:'get',
                    param:{

                    },
                    success:(ret)=>{
                        console.log('请求获得热门主题')
                        console.log(ret)

                    },
                    error:(err)=>{

                    }
                })*/


        },
        methods: {
//            获得发布模块信息
            getModelData(){
                /*请求获得发表分类*/
                this.fetchs.GetDatasdes({
//                    url:'/webapi/Community/GetThemType',
                    url:'/webapi/Community/TopicItems',
                    type:'get',
                    param:{

                    },
                    success:(ret)=>{
                        console.log('请求获得发表分类')
                        console.log(ret)
                        this.modelList = ret.data
                        console.log(this.modelList)


                    },
                    error:(err)=>{

                    }
                })
            },
//            上传成功时
            handleSuccess1(res,file){
                let list = this.imglist
                let img = res.data[0]
                this.imglist.push(img)
                if(this.imglist.length>5){
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                    this.imglist = this.imglist.slice(0,5)
                }

            },
            herror(res,file){

            },
//            上传出错时
            ferror(res,file){
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + res.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            progress1(res,file){

            },
//            上传之前进行验证
            handleBeforeUpload(){
                const check = this.imglist.length < 5;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
//          文件大小验证
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            /*实例删除*/
            handleRemove (file) {
                // 从 upload 实例删除数据
                const fileList = this.imglist
                this.imglist.splice(fileList.indexOf(file), 1);
            },


            /*提交*/
            takeSub(){

                console.log(this.classId)
                console.log(this.txtData)
                console.log(this.titleData)
                console.log(this.imglist)
                this.fetchs.GetDatasdes({
                        url:'/webapi/Community/PublishTheme',
                        type:'post',
                        param: {
                            "title": this.titleData,
                            "content": this.txtData,
                            "classId": this.classId,
                            "tags": "1",
                        },
                        success:(ret)=>{
                            console.log('发布成功')
                            console.log(ret)

                },
                    error:(err)=>{

                }
            })


            },






        },
        components: {

        },
        mounted(){
            window.scrollTo(0,0)
            /*设置节点的宽度高度*/
            let change_height = this.$refs.question_cont_bor.clientHeight - 412
            console.log(change_height)
            this.$refs.question_cont.style.height =change_height+ 'px'
        },
        computed: {},
        watch: {}
    }
</script>
<style scoped>
    #iFooter{
        display: none;
    }

    /*-----------------------提问详情样式------------------------*/
    /*banner部分*/
    .question_cont_banner{
        width:100%;
        height: 480px;
        background: inherit;
        background-color: rgba(49, 160, 227, 1);
    }
    /*提问内容部分*/
    .question_cont{
        width:100%;
        display: flex;
        justify-content: center;
        position: relative;
        background-color: rgba(242, 242, 242, 1);
    }
    .question_cont_bor{
        width:1180px;
        position: absolute;
        top:-412px;
    }
    .question_box_top{
        width:100%;
        height:42px;
        line-height: 42px;

    }
    .question_box_top>span{
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #fff;
        position: relative;
        top:-3px;
        font-weight: 400;
    }
    .question_cont_box{
        width:1180px;
        background-color: white;
        display: flex;
        justify-content: center;

    }
    .question_cont_box>div{
        width:1020px;
        margin-top:30px ;
    }
    .question_cont_box_title{
        display: flex;
        justify-content: space-between;
        margin-top: 25px;
        margin-bottom: 20px;
    }
    .question_cont_box_title_left{
        width:700px;
        height:90px;
    }
    .question_title{
        margin:20px 0;
        height: 20px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        color: #333;
        font-size: 14px;
    }
    .question_title>span:nth-child(2){
        font-size: 12px;
        color: #999;
        margin-left: 10px;
    }
    .question_cont_box_title_right{
        width:300px;
        height:90px;
    }
    .question_cont_box_title_left>input{
        width:700px;
        height:40px;
        border:1px solid #ccc;
        padding-left: 10px;
        font-size: 16px;
    }
    .question_cont_box_title_left>input:focus{
        outline:none;
        border:1px solid rgba(49, 160, 227, 1);
        background-color: rgba(255, 255, 255, 1);
    }
    .question_cont_box_title_right select{
        width:300px;
        height:40px;
        border:1px solid #ccc;
        padding-left: 10px;

        /*很关键：将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示小箭头图片*/
        /*background: url("../../assets/img/u108.svg") no-repeat scroll right center transparent;*/
        background: url("/app/assets/img/u108.svg") no-repeat scroll right center transparent;
        /*为下拉小箭头留出一点位置，避免被文字覆盖*/
        background-color: white;
        background-size:16px 16px;
        background-position:  255px 50%;
        padding-right: 25px;
    }
    .question_cont_box_title_right select:focus{

        outline:none;

        /*color: #ccc;*/
        border:1px solid rgba(49, 160, 227, 1);
        background-color: rgba(255, 255, 255, 1);
    }
    .question_cont_box_title_right option{
        /*color: red;*/
        /*height:30px;*/
    }

    /*问题内容*/
    .question_cont_box_txt{
        width:100%;
        margin:40px 0;
    }
    .question_cont_box_txt_title{
        height: 20px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        margin:15px 0;
    }
    .question_cont_box_txt textarea{
        width:1020px;
        height:320px;
        border:1px solid #ccc;
        padding:10px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 24px;
        color: #333;
        /*resize: none;*/

    }
    .question_cont_box_txt textarea:focus{
        outline:none;
        border:1px solid rgba(49, 160, 227, 1);
    }
    .question_cont_box_txt_title{
        margin:15px 0;
        width:100%;
    }
    .uploadimg_btn{
        height:32px;
    }
    .question_cont_box_txt_title>span:nth-child(2){
        height: 12px;
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #999999;
        text-align: left;
        line-height: 12px;
    }
    .question_cont_box_txt_imglist{
        width:100%;
        height:80px;
        display: flex;
        justify-content: flex-start;

    }
    .question_cont_box_txt_imglist_item{
        width:120px;
        height:63px;
        position: relative;
        margin-right: 10px;
    }
    .question_cont_box_txt_imglist_item>img:nth-child(1){
        width:120px;
        height:63px;
    }
    /*-----------------------------------------------------------*/
    .question_cont_box_txt_imglist_item>img:nth-child(2){
        width:16px;
        height:16px;
        position: absolute;
        right:0;
        bottom: 0;
    }
    .question_cont_box_txt_imglist_item>.imgbg>.img{
        width:16px;
        height:16px;
        display: inline-block;
        background-image:url(/app/assets/img/askqes_del.svg) ;
    }
    .question_cont_box_txt_imglist_item>.imgbg{
        display: inline-block;
        width:24px;
        height:24px;
        position: absolute;
        right:0;
        bottom: 0;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .5;
    }
    .question_cont_box_button{
        width:100%;
        margin-top: 40px;
        margin-bottom: 80px;
        /*margin:80px 0;*/
    }
    .question_cont_box_button_txt{
        width:180px;
        height:40px;
        background-color:rgba(49, 160, 227, 1) ;
        color: #fff;
        text-align: center;
        line-height: 40px;
        /*margin:15px 0;*/
    }

    /*上传样式*/
    .ivu-upload{
        display: inline-block!important;
    }


</style>